import React, { Component } from 'react'

export default class Test extends Component {
  // constructor() {
  //   super()
  //   // this.num = 0  this是当前组件实例,我们可以随意的往实例上添加属性
  //   // this.num是组件的私有数据,但是不能称之为状态
  //   // this.state是组件的私有数据,但是可以称之为状态
  //   this.state = {
  //     count: 0,
  //     msg: 'hello component',
  //   }
  //   // 第一种解决方案:
  //   this.handle = () => {
  //     this.setState({
  //       count: this.state.count + 1,
  //     })
  //   }

  //   // 第三种解决办法:
  //   // this.handle = this.handle.bind(this)
  // }

  // 这个handle添加到了原型上
  // handle() {
  //   this.setState({
  //     count: this.state.count + 1,
  //   })
  // }

  state = {
    count: 0,
    msg: 'hello component',
  }

  //下面的是构造器中this.handle =() => {} 的简写
  // 这种写法是es7中新增的语法 属性 = 值
  handle = () => {
    this.setState({
      count: this.state.count + 1,
    })
  }

  render() {
    // 注意: render函数中的this,一定是当前组件实例
    console.log('render函数执行了', this.state.count)

    return (
      <div>
        <h3>{this.state.count}</h3>
        <h3>{this.state.msg}</h3>
        <button
          // 第二种方案:
          // onClick={() => {
          //   // 1. 当我们点击按钮,是外层的这个箭头函数,在react内部被apply调用
          //   // 2. 我们手动调用了handle.是利用组件实例调用的.属于对象调用模式,所以handle中的this一定指向当前组实例
          //   this.handle()
          // }}

          onClick={this.handle}
        >
          +
        </button>
      </div>
    )
  }
}

/*
    伪代码: 
    React.Component = Component
    export default React 
    export Component

*/
